<template>
    <div>
        <!--  -->
        <h1>toRefs</h1>
        <h1>{{obj.name}}</h1><!-- 有双向数据绑定 -->
        <h1>{{obj.age}}</h1><!-- 有双向数据绑定 -->
        <h1>{{name}}</h1><!-- 有双向数据绑定 是obj.name -->
        <h1>{{age}}</h1><!-- 有双向数据绑定 是obj.age-->
        <input type="text" v-model="obj.name"><br>
        <input type="text" v-model="obj.age"><br>
        <input type="text" v-model="name"><br>
        <input type="text" v-model="age"><br>
        <input type="text" v-model="name1"><br>
        <input type="text" v-model="age1"><br>
    </div>
</template>

<script lang="ts">
import { defineComponent ,reactive,toRefs} from 'vue'

export default defineComponent({
    setup () {
        const obj = reactive({
            name:'tom',
            age:19
        })
        console.log(obj);//是一个proxy对象
        const objToRefs = toRefs(obj);
        const name1 = obj.name;
        const age1 = obj.age;
        return {
            obj,
            ...objToRefs,
            name1,
            age1
        }
    }
})
</script>

<style scoped>

</style>